<template>
    <ph-actionsheet :visible="visible" position="right" class="ph-iframe-wrap" :width="width" @hide="visible=false">
        <iframe v-if="src" class="ph-iframe" :src="src" frameborder="0" @load="onLoad"></iframe>
        <button class="ph-iframe-drag" v-drag="onDrag"></button>
        <ph-loading :alpha="false" position="absolute" ref="eloading"/>
    </ph-actionsheet>
</template>
<script lang="ts">
import { defineComponent, nextTick, ref } from 'vue'
import { getTouchEvents } from 'ph-util'
import { PhLoading } from '@/components'
import PhActionsheet from 'ph-actionsheet'

export default defineComponent({
    components:{PhActionsheet,PhLoading},
    directives:{
        drag:{
            beforeMount(el:HTMLElement,binding:any){
                const {touchstart,touchmove,touchend} = getTouchEvents()
                const onSelect = (e:Event)=>{
                    e.preventDefault()
                }
                const onMove = (e:MouseEvent)=>{
                    const clientWidth = document.documentElement.clientWidth
                    const res = clientWidth - e.clientX
                    if(res<200||res>clientWidth-20)return
                    binding.value(res)
                    // const tx = res-pnode.offsetWidth +"px"
                    // el.style.transform = `translateX(${tx})`
                }
                const onEnd = ()=>{
                    (document as any).removeEventListener(touchmove,onMove);
                    (document as any).removeEventListener(touchend,onEnd);
                    (document as any).removeEventListener("selectstart",onSelect);
                    const pnode = (el.parentElement as HTMLElement)
                    pnode.classList.remove("moving")
                }
                el.addEventListener(touchstart,()=>{
                    const pnode = (el.parentElement as HTMLElement)
                    pnode.classList.add("moving")
                    ;(document as any).addEventListener(touchmove,onMove)
                    ;(document as any).addEventListener(touchend,onEnd)
                    ;(document as any).addEventListener("selectstart",onSelect);
                })
                
            }
        }
    },
    setup() {
        const visible = ref(false)
        const src = ref("")
        const width = ref("320px")
        const eloading = ref<InstanceType<typeof PhLoading>>()
        const onDrag = (x:number)=>{
            width.value = x+"px"
        }
        const show = (url:string)=>{
            src.value = "/phoeon-ui-doc#"+url
            visible.value = true
            nextTick(()=>{
                eloading.value?.show()
            })
        }
        const onLoad = ()=>eloading.value?.hide()
        return {
            onLoad,
            onDrag,width,show,src,visible,eloading
        }
    }
})
</script>
<style lang="scss">
.ph-iframe-wrap{
    z-index:99999;
    .ph-actionsheet{
        min-width:320px;
        width:375px;
        box-shadow: 0 0 var(--ph-15) rgba(0 0 0 /50%);
        &.moving:after{
            content:"";
            position: absolute;
            top:0;
            bottom: 0;
            left:0;
            right:0;
            z-index: 1;
        }
    }
    .ph-iframe-drag{
        position: absolute;
        height: 60px;
        width:10px;
        background-color: var(--ph-dark-l1);
        top:50%;
        left: 0;
        cursor: ew-resize;
        border: none;
        transform: translateY(-50%);
        box-shadow: 0 0 3px 0 #fff;
        z-index: 2;
        transition: opacity .3s ease;
        opacity: .5;
        &:before{
            content: "";
            position: absolute;
            height: 20px;
            width: 4px;
            left: 3px;
            top: 20px;
            border-left: 1px solid #fff;
            border-right: 1px solid #fff;
        }
        &:hover{
            opacity: 1;
        }
    }
}
.ph-iframe{
    width:100%;
    height: 100%;
}
</style>